<template>
  <div class="page">
    <span>当前队伍 <router-link to="/setting/permissionsManage">前往修改</router-link></span>
    <div class="personal-staff" style="width: 100%">
      <el-tree
        style="width: 40%"
        :props="props"
        highlight-current
        :load="loadNode"
        @node-click="handleAccountChange"
        lazy
      ><span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}-{{data.account}}</span>
        </span>
      </el-tree>
      <PersonalReport :account="account" style="width: 60%" key="2" ref="staffReport" :index="202"/>
    </div>
  </div>
</template>

<script>
import {getEmployeesBySenior} from "../../func/setting/models/employee";
import PersonalReport from "./PersonalReport";

export default {
  name: "PersonalStaff",
  components: {PersonalReport},
  props:['senior'],
  data(){
    return{
      account:this.senior.account,
      props:{
        label:'name',
        children:'children',
        isleaf:'leaf'
      }
    }
  },
  methods:{
    handleAccountChange(obj){
      console.log(obj)
      this.account=obj.account;
      this.$refs.staffReport.loadDataSet();
      console.log(this.account);
    },
    loadNode(node, cb) {
      if (node.level === 0) {
        return cb([{ name: this.senior.name ,account:this.senior.account}]);
      }
      console.log(node);
      getEmployeesBySenior(node.data.account).then(success=>{
        let data=Array.from(success).map(item=>{
          return {name:item.name,account:item.account,leaf:item.Pimpower};
        })
        cb(data);
      },failed=>{
        this.$message({
          type:'error',
          message:'节点加载失败'
        });
        cb([])
      })
    }
  }
}
</script>

<style scoped>
.personal-staff{
  display: flex;
}
.page{
  width: 100%;
}
</style>
